<template>
  <div :id="name" class="chart-container"></div>
</template>
<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
import 'echarts/map/js/china.js'
export default {
  data () {
    return {}
  },
  props: {
    name: {
      type: String,
      default: 'mapChart'
    },
  },
  mounted() {
    this.drawLine(this.name)
  },
  methods: {
    drawLine(id) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById(id))
      let allData = {
　　　　"citys":[
          {"name":"寿光","value":[118.74047,36.88128],"symbolSize":18,"itemStyle":{"normal":{"color":"#FF7875"}}},
          {"name":"大同","value":[113.295259,40.09031],"symbolSize":5,"itemStyle":{"normal":{"color":"#FF7875"}}},
          {"name":"赤峰","value":[118.956806,42.275317],"symbolSize":5,"itemStyle":{"normal":{"color":"#FF7875"}}},
          {"name":"哈尔滨","value":[126.642464,45.756967],"symbolSize":5,"itemStyle":{"normal":{"color":"#FF7875"}}},
          {"name":"长春","value":[125.3245,43.886841],"symbolSize":5,"itemStyle":{"normal":{"color":"#FF7875"}}},
          {"name":"沈阳","value":[123.429096,41.796767],"symbolSize":5,"itemStyle":{"normal":{"color":"#FF7875"}}},
          {"name":"郑州","value":[113.665412,34.757975],"symbolSize":5,"itemStyle":{"normal":{"color":"#FF7875"}}},
          {"name":"徐州","value":[117.184811,34.261792],"symbolSize":5,"itemStyle":{"normal":{"color":"#FF7875"}}},
          {"name":"昆明","value":[102.712251,25.040609],"symbolSize":5,"itemStyle":{"normal":{"color":"#FF7875"}}},
        ],
        "moveLines":[
          {"fromName":"寿光","toName":"大同","coords":[[118.74047,36.88128],[113.295259,40.09031]]},
          {"fromName":"寿光","toName":"赤峰","coords":[[118.74047,36.88128],[118.956806,42.275317]]},
          {"fromName":"寿光","toName":"哈尔滨","coords":[[118.74047,36.88128],[126.642464,45.756967]]},
          {"fromName":"寿光","toName":"长春","coords":[[118.74047,36.88128],[125.3245,43.886841]]},
          {"fromName":"寿光","toName":"沈阳","coords":[[118.74047,36.88128],[123.429096,41.796767]]},
          {"fromName":"寿光","toName":"郑州","coords":[[118.74047,36.88128],[113.665412,34.757975]]},
          {"fromName":"寿光","toName":"徐州","coords":[[118.74047,36.88128],[117.184811,34.261792]]},
          {"fromName":"寿光","toName":"昆明","coords":[[118.74047,36.88128],[102.712251,25.040609]]},
        ]
      };
      let option = {
        legend: { // 右下角图例
          show: false, // 是否显示
          orient: 'vertical', // 图例排列方向
          top: 'bottom', // 位置
          left: 'right', // 位置
          data: ['地点', '线路'], // 数据
          textStyle: { // 文字设置
            color: '#fff'
          }
        },
        geo: {
          show:true, // 是否显示
          map: 'china', // 地图类型。world世界地图，china中国地图
        // center:[115.97, 29.71], //当前视角的中心点，用经纬度表示
          label: {
            normal:{ //普通状态下的标签文本样式。(省份名称)
              show: false, //是否在普通状态下显示标签。
              textStyle: { // 文字设置
                color: '#fff'
              },
            },
            emphasis: { // 是否在高亮状态下显示标签。(省份名称)
              show: true,
              textStyle: { // 文字设置
                color: '#fff'
              },
            }
          },
          roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
          itemStyle: { // 地图板块区域的多边形 图形样式
            normal: { // 默认板块信息
              areaColor: '#40A9FF',
              borderColor: '#E6F7FF'
            },
            emphasis: { // 高亮版板块信息
              areaColor: '#1890FF'
            }
          }
        },
        series: [{
          name: '地点',
          type: 'effectScatter', // 特效散点图
          coordinateSystem: 'geo', // 'cartesian2d'使用二维的直角坐标系。'geo'使用地理坐标系
          zlevel: 2, // 所有图形的 zlevel 值。
          rippleEffect: { //涟漪特效相关配置。
              brushType: 'stroke', //波纹的绘制方式，可选 'stroke' 和 'fill'。
              period:4, // 动画的时间。
              scale:2.5, // 动画中波纹的最大缩放比例。
          },
          label: {
            normal: {
              show: false,                  //是否显示标签。
              position: "inside",          //标签的位置。// 绝对的像素值[10, 10]
              offset: [30, 4],             //是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。
              formatter: '{b}: {c}',       //标签内容格式器。模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。
            },
            emphasis: {
              show: true,
              position: 'right',
              formatter: '{b}'
            }
          },
          symbolSize: 2, // 标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
          showEffectOn: 'render', // 配置何时显示特效。可选：'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
          itemStyle: { // 图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
            normal: {
              color: '#46bee9'
            }
          },
          data: allData.citys
        },
        {
          name: '线路',
          type: 'lines',
          coordinateSystem: 'geo', // 'cartesian2d'使用二维的直角坐标系。'geo'使用地理坐标系
          zlevel: 2,
          large: true, // 是否开启大规模散点图的优化，在数据图形特别多的时候（>=5k）可以开启。开启后配合 largeThreshold 在数据量大于指定阈值的时候对绘制进行优化。缺点：优化后不能自定义设置单个数据项的样式。
          effect: {
            show: true,
            constantSpeed: 25, // 点移动的速度
            symbol: 'pin',  // 图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            symbolSize: 8, // 标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
            trailLength: 0, // 线的宽度
          },
          lineStyle: { // 线的颜色、宽度，样式设置
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0, color: '#FAAD14'
              }, {
                offset: 1, color: '#FFD591'
              }], false),
              width: 2, // 线的宽度
              opacity: 0.5, // 线的透明度
              curveness: 0.3 // 线的完全程度
            }
          },
          data: allData.moveLines
        }]
      }
      // 绘制图表
      myChart.setOption(option);
      setTimeout(function (){
        window.onresize = function () {
          myChart.resize();
        }
      },200)
    }
  }
}
</script>
<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>
